<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import router from "@/router/index";
import { _$, $ } from "./edit";

const formRef = ref();

onMounted(() => {
  if (router.currentRoute.value.query.id) {
    _$.requestParam.id = router.currentRoute.value.query?.id;
    $.loadEdit();
  }
});

onUnmounted(() => {
  $.clean();
});
</script>

<template>
  <el-space direction="normal" fill wrap class="w-fill" :size="20">
    <el-page-header @back="router.back()" size="small">
      <template #content>
        <span class="text-large font-600 mr-3">用户名</span>
        <span class="text-large font-600 mr-3">信息</span>
      </template>
    </el-page-header>
    <el-card class="w-fill" shadow="never">
      <el-space wrap class="w-fill" :size="20">
        <el-button type="info" size="small" @click="$.onReset(formRef)"
          >重置</el-button
        >
        <el-button type="primary" size="small" @click="$.onSubmit(formRef)"
          >提交</el-button
        >
      </el-space>
    </el-card>
    <el-card class="w-fill" shadow="never">
      <el-descriptions title="基本信息">
        <el-descriptions-item>
          <el-form
            ref="formRef"
            :model="_$.requestParam"
            :rules="_$.rules"
            label-width="auto"
            size="small"
            style="max-width: 600px"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="_$.requestParam.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password" v-show="!_$.requestParam.id">
              <el-input v-model="_$.requestParam.password" type="password"/>
            </el-form-item>
            <el-form-item label="昵称" prop="name">
              <el-input v-model="_$.requestParam.name" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="_$.requestParam.gender">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="_$.requestParam.phone" />
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker v-model="_$.requestParam.birthday" type="date" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="_$.requestParam.email" />
            </el-form-item>
          </el-form>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </el-space>
</template>

<style scoped></style>
